<template>
  <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler"></baidu-map>
</template>

<script>
import {getAction} from '@/api/manage'
// import BMapLib from './GeoUtils_min.js'

export default {
  name: 'bmap',
  data() {
    return {
      BMap: {},
      map: {},
      center: {},
      zoom: 10,
      ismove : 0, //0代表单击触摸 1代表触摸移动
      plys : []
    }
  },
  mounted() {},
  methods: {
    handler({ BMap, map }) {
      this.BMap = BMap
      this.map = map
      this.initMap();
      this.getSchoolData();
      this.getVillageData();
    },
    initMap() {
      //初始化南宁市 放大级别13
      this.center = { lng: 108.3733749001, lat: 22.822986998 }
      this.zoom = 13
      this.enableMapClick = false
      //添加地图类型控件
      /*this.map.addControl(
        new BMap.MapTypeControl({
          mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
        })
      )*/
      //添加左上角缩放平移控件
      //this.map.addControl(new BMap.NavigationControl())
      //添加左下角比例尺
      this.map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }))
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true)

      this.map.addEventListener("touchstart",function(e){
        this.ismove = 0;
      });
      this.map.addEventListener("touchmove",function(e){
        this.ismove = 1;
      });
      var test1 = this.plys;
      this.map.addEventListener("touchend",function(e){
        if(this.ismove == 0){
          var poin = 0;
          for(var i = 0; i < test1.length; i++){
            var result = BMapLib.GeoUtils.isPointInPolygon(e.point, test1[i]);
            if(result==true){
              poin = 1;
              var test = window.location.origin+"/snMap/"+test1[i].dataCont.picPath;
              var viewWin =
                "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +
                test1[i].dataCont.name +
                '</h4>' +
                "<img style='float:right;margin:4px' id='imgDemo' src='" +
                test +
                "' width='139' height='104' title='" +
                test1[i].dataCont.name +
                "'/>" +
                "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" +
                test1[i].dataCont.content +
                '</p>' +
                '</div>'
              var infoWindow = new BMap.InfoWindow(viewWin);
              this.openInfoWindow(infoWindow,e.point);
              //图片加载完毕重绘infowindow
              document.getElementById('imgDemo').onload = function (){
                infoWindow.redraw();//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
              }
            }
          }
        }
      });
/*      this.map.addEventListener("click",function(e){
        var poin = 0;
        for(var i = 0; i < test1.length; i++){
          var result = BMapLib.GeoUtils.isPointInPolygon(e.point, test1[i]);
            if(result==true){
              poin = 1;
              alert("在范围内:"+test1[i].dataCont.name);
            }
          }
          if(poin == 0){
            alert("不在范围内");
          }
      });*/
    },
    getSchoolData(){
      var url = "school/school/getAll";
      
      getAction(url).then((data) => {
        this.addpoly(data);
      }, (err) => {
        //error callback
      })
    },
    getVillageData(){
      var url = "village/village/getAll";
      getAction(url).then((data) => {
        this.addpoly(data);
      }, (err) => {
        //error callback
      })
    },
    addMar(data,type) {
      var icon = "";
      if(type=="school"){
        icon = "img/school.png";
      }else if(type=="village"){
        icon = "img/neighbourhoods.png";
      }
      for (var i = 0; i < data.length; i++) {
        var marker = new BMap.Marker(new BMap.Point(data[i].longitude, data[i].latitude), {
          icon: new BMap.Icon(require('../../assets/map/'+icon), new BMap.Size(50, 50))
        }) // 创建标注
        marker.setTitle(data[i].name)
        marker.dataCont = data[i]

        this.map.addOverlay(marker)

        marker.addEventListener('click', function(e) {
          var viewWin =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +
            e.target.dataCont.name +
            '</h4>' +
            "<img style='float:right;margin:4px' id='imgDemo' src='" +
            require(e.target.dataCont.picPath) +
            "' width='139' height='104' title='" +
            e.target.dataCont.name +
            "'/>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" +
            e.target.dataCont.content +
            '</p>' +
            '</div>'
          var infoWindow = new BMap.InfoWindow(viewWin)
          this.openInfoWindow(infoWindow)
          //图片加载完毕重绘infowindow
          document.getElementById('imgDemo').onload = function() {
            infoWindow.redraw() //防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
          }
        })
      }
    },
    addpoly(data) {
      for(var i = 0; i < data.length; i++){
        var ply = new BMap.Polygon(data[i].range, {strokeWeight: 2, strokeColor: data[i].rangeColor}); //建立多边形覆盖物

        ply.dataCont = data[i];

        this.map.addOverlay(ply);

        this.plys.push(ply);

        ply.addEventListener("click", function(e){
          var test = window.location.origin+"/snMap/"+e.target.dataCont.picPath;
          var viewWin =
            "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>" +
            e.target.dataCont.name +
            '</h4>' +
            "<img style='float:right;margin:4px' id='imgDemo' src='" +
            test +
            "' width='139' height='104' title='" +
            e.target.dataCont.name +
            "'/>" +
            "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>" +
            e.target.dataCont.content +
            '</p>' +
            '</div>'
          var infoWindow = new BMap.InfoWindow(viewWin);
          this.map.openInfoWindow(infoWindow,e.point);
          //图片加载完毕重绘infowindow
          document.getElementById('imgDemo').onload = function (){
            infoWindow.redraw();//防止在网速较慢，图片未加载时，生成的信息框高度比图片的总高度小，导致图片部分被隐藏
          }
        });

      }
    },
    pointInPly(plys){

    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 100%;
}
</style>